<template>
    <view class="container">
        <view class="order-info">
            <view class="item">
                <view class="label">下单时间：</view>
                <view class="txt">{{ orderInfo.addTime }}</view>
            </view>
            <view class="item">
                <view class="label">订单编号：</view>
                <view class="txt">{{ orderInfo.orderSn }}</view>
            </view>
            <view class="item">
                <view class="label">订单留言：</view>
                <view class="txt">{{ orderInfo.message }}</view>
            </view>
            <view class="item-c">
                <view class="r">
                    <view class="btn active" @tap="cancelOrder" v-if="handleOption.cancel">取消订单</view>
                    <view class="btn active" @tap="payOrder" v-if="handleOption.pay">去付款</view>
                    <view class="btn active" @tap="confirmOrder" v-if="handleOption.confirm">确认收货</view>
                    <view class="btn active" @tap="deleteOrder" v-if="handleOption.delete">删除订单</view>
                    <view class="btn active" @tap="refundOrder" v-if="handleOption.refund">申请退款</view>
                    <view class="btn active" @tap="aftersaleOrder" v-if="handleOption.aftersale">申请售后</view>
                </view>
            </view>
        </view>

        <view class="order-goods">
            <view class="h">
                <view class="label">商品信息</view>
                <view class="status">{{ orderInfo.orderStatusText }}</view>
            </view>
            <view class="goods">
                <view class="item" v-for="(item, index) in orderGoods" :key="index">
                    <view class="img">
                        <image :src="item.picUrl"></image>
                    </view>

                    <view class="info">
                        <view class="t">
                            <text class="name">{{ item.goodsName }}</text>
                            <text class="number">x{{ item.number }}</text>
                        </view>
                        <view class="attr">{{ item.specifications }}</view>
                        <view class="price">￥{{ item.price }}</view>
                        <view class="btn active" v-if="handleOption.comment && item.comment == 0">
                            <navigator :url="'../../commentPost/commentPost?ogid=' + item.id">去评价</navigator>
                        </view>
                        <view class="btn active" v-if="handleOption.rebuy">
                            <navigator :url="'../../goods/goods?id=' + item.goodsId">再次购买</navigator>
                        </view>
                    </view>
                </view>
            </view>

            <view class="order-bottom">
                <view class="address">
                    <view class="t">
                        <text class="name">{{ orderInfo.consignee }}</text>
                        <text class="mobile">{{ orderInfo.mobile }}</text>
                    </view>
                    <view class="b">{{ orderInfo.address }}</view>
                </view>
                <view class="total">
                    <view class="t">
                        <text class="label">商品合计：</text>
                        <text class="txt">￥{{ orderInfo.goodsPrice }}元</text>
                    </view>
                    <view class="t">
                        <text class="label">订单运费：</text>
                        <text class="txt">￥{{ orderInfo.freightPrice }}元</text>
                    </view>
                    <view class="t">
                        <text class="label">订单优惠：</text>
                        <text class="txt">-￥{{ orderInfo.couponPrice }}元</text>
                    </view>
                    <view class="t">
                        <text class="label">订单实付：</text>
                        <text class="txt">￥{{ orderInfo.actualPrice }}元</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="order-express" @tap="expandDetail" v-if="orderInfo.expNo">
            <view class="order-express">
                <view class="title">
                    <view class="t">快递公司：{{ orderInfo.expName }}</view>
                    <view class="b">物流单号：{{ orderInfo.expNo }}</view>
                </view>
                <van-icon class="ti" name="arrow" />
            </view>
            <view class="traces" v-if="flag" v-for="(iitem, index) in expressInfo.Traces" :key="index">
                <view class="trace">
                    <view class="acceptStation">{{ iitem.AcceptStation }}</view>
                    <view class="acceptTime">{{ iitem.AcceptTime }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
export default {
    data() {
        return {
            orderId: 0,

            orderInfo: {
                addTime: '',
                orderSn: '',
                message: '',
                orderStatusText: '',
                consignee: '',
                mobile: '',
                address: '',
                goodsPrice: '',
                freightPrice: '',
                couponPrice: '',
                actualPrice: '',
                expNo: '',
                expName: ''
            },

            orderGoods: [],

            expressInfo: {
                Traces: []
            },

            flag: false,

            handleOption: {
                cancel: '',
                pay: '',
                confirm: '',
                delete: '',
                refund: '',
                aftersale: '',
                comment: '',
                rebuy: ''
            },

            iitem: {
                AcceptStation: '',
                AcceptTime: ''
            }
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        this.setData({
            orderId: options.id
        });
        this.getOrderDetail();
    },
    onPullDownRefresh() {
        uni.showNavigationBarLoading(); //在标题栏中显示加载
        this.getOrderDetail();
        uni.hideNavigationBarLoading(); //完成停止加载
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        expandDetail: function () {
            let that = this;
            this.setData({
                flag: !that.flag
            });
        },

        getOrderDetail: function () {
            uni.showLoading({
                title: '加载中'
            });
            setTimeout(function () {
                uni.hideLoading();
            }, 2000);
            let that = this;
            util.request(api.OrderDetail, {
                orderId: that.orderId
            }).then(function (res) {
                if (res.errno === 0) {
                    console.log(res.data);
                    that.setData({
                        orderInfo: res.data.orderInfo,
                        orderGoods: res.data.orderGoods,
                        handleOption: res.data.orderInfo.handleOption,
                        expressInfo: res.data.expressInfo
                    });
                }
                uni.hideLoading();
            });
        },

        // “去付款”按钮点击效果
        payOrder: function () {
            let that = this;
            util.request(
                api.OrderPrepay,
                {
                    orderId: that.orderId
                },
                'POST'
            ).then(function (res) {
                if (res.errno === 0) {
                    const payParam = res.data;
                    console.log('支付过程开始');
                    uni.requestPayment({
                        timeStamp: payParam.timeStamp,
                        nonceStr: payParam.nonceStr,
                        package: payParam.packageValue,
                        signType: payParam.signType,
                        paySign: payParam.paySign,
                        success: function (res) {
                            console.log('支付过程成功');
                            util.redirect('/pages/ucenter/order/order');
                        },
                        fail: function (res) {
                            console.log('支付过程失败');
                            util.showErrorToast('支付失败');
                        },
                        complete: function (res) {
                            console.log('支付过程结束');
                        }
                    });
                }
            });
        },

        // “取消订单”点击效果
        cancelOrder: function () {
            let that = this;
            let orderInfo = that.orderInfo;
            uni.showModal({
                title: '',
                content: '确定要取消此订单？',
                success: function (res) {
                    if (res.confirm) {
                        util.request(
                            api.OrderCancel,
                            {
                                orderId: orderInfo.id
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.showToast({
                                    title: '取消订单成功'
                                });
                                util.redirect('/pages/ucenter/order/order');
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        // “取消订单并退款”点击效果
        refundOrder: function () {
            let that = this;
            let orderInfo = that.orderInfo;
            uni.showModal({
                title: '',
                content: '确定要取消此订单？',
                success: function (res) {
                    if (res.confirm) {
                        util.request(
                            api.OrderRefund,
                            {
                                orderId: orderInfo.id
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.showToast({
                                    title: '取消订单成功'
                                });
                                util.redirect('/pages/ucenter/order/order');
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        // “删除”点击效果
        deleteOrder: function () {
            let that = this;
            let orderInfo = that.orderInfo;
            uni.showModal({
                title: '',
                content: '确定要删除此订单？',
                success: function (res) {
                    if (res.confirm) {
                        util.request(
                            api.OrderDelete,
                            {
                                orderId: orderInfo.id
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.showToast({
                                    title: '删除订单成功'
                                });
                                util.redirect('/pages/ucenter/order/order');
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        // “确认收货”点击效果
        confirmOrder: function () {
            let that = this;
            let orderInfo = that.orderInfo;
            uni.showModal({
                title: '',
                content: '确认收货？',
                success: function (res) {
                    if (res.confirm) {
                        util.request(
                            api.OrderConfirm,
                            {
                                orderId: orderInfo.id
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.showToast({
                                    title: '确认收货成功！'
                                });
                                util.redirect('/pages/ucenter/order/order');
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        // “申请售后”点击效果
        aftersaleOrder: function () {
            if (this.orderInfo.aftersaleStatus === 0) {
                util.redirect('/pages/ucenter/aftersale/aftersale?id=' + this.orderId);
            } else {
                util.redirect('/pages/ucenter/aftersaleDetail/aftersaleDetail?id=' + this.orderId);
            }
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

.order-info {
    padding-top: 25rpx;
    background: #fff;
    height: auto;
    overflow: hidden;
}

.order-info .item {
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f4f4f4;
    padding: 0 31.25rpx;
}

.item-c {
    margin-left: 31.25rpx;
    border-top: 1px solid #f4f4f4;
    height: 103rpx;
    line-height: 103rpx;
}

.item-c .l {
    float: left;
}

.item-c .r {
    height: 103rpx;
    float: right;
    display: flex;
    align-items: center;
    padding-right: 16rpx;
}

.item-c .r .btn {
    float: right;
}

.item-c .cost {
    color: #b4282d;
}

.item-c .btn {
    line-height: 66rpx;
    border-radius: 5rpx;
    text-align: center;
    margin: 0 15rpx;
    padding: 0 20rpx;
    height: 66rpx;
}

.item-c .btn.active {
    background: #b4282d;
    color: #fff;
}

.order-goods {
    margin-top: 20rpx;
    background: #fff;
}

.order-goods .h {
    height: 93.75rpx;
    line-height: 93.75rpx;
    margin-left: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
    padding-right: 31.25rpx;
}

.order-goods .h .label {
    float: left;
    font-size: 30rpx;
    color: #333;
}

.order-goods .h .status {
    float: right;
    font-size: 30rpx;
    color: #b4282d;
}

.order-goods .item {
    display: flex;
    align-items: center;
    height: 192rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
}

.order-goods .item:last-child {
    border-bottom: none;
}

.order-goods .item .img {
    height: 145.83rpx;
    width: 145.83rpx;
    background: #f4f4f4;
}

.order-goods .item .img image {
    height: 145.83rpx;
    width: 145.83rpx;
}

.order-goods .item .info {
    flex: 1;
    height: 145.83rpx;
    margin-left: 20rpx;
}

.order-goods .item .t {
    margin-top: 8rpx;
    height: 33rpx;
    line-height: 33rpx;
    margin-bottom: 10.5rpx;
}

.order-goods .item .t .name {
    display: block;
    float: left;
    height: 33rpx;
    line-height: 33rpx;
    color: #333;
    font-size: 30rpx;
}

.order-goods .item .t .number {
    display: block;
    float: right;
    height: 33rpx;
    text-align: right;
    line-height: 33rpx;
    color: #333;
    font-size: 30rpx;
}

.order-goods .item .attr {
    height: 29rpx;
    line-height: 29rpx;
    color: #666;
    margin-bottom: 25rpx;
    font-size: 25rpx;
}

.order-goods .item .price {
    display: block;
    float: left;
    height: 30rpx;
    line-height: 30rpx;
    color: #333;
    font-size: 30rpx;
}

.order-goods .item .btn {
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 5rpx;
    text-align: center;
    display: block;
    float: right;
    margin: 0 15rpx;
    padding: 0 20rpx;
}

.order-goods .item .btn.active {
    background: #b4282d;
    color: #fff;
}

.order-bottom {
    margin-top: 20rpx;
    padding: 0 31.25rpx;
    height: auto;
    overflow: hidden;
    background: #fff;
}

.order-bottom .address .t {
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f4f4f4;
}

.order-bottom .address .b {
    height: 60rpx;
    line-height: 60rpx;
    font-size: 30rpx;
    border-bottom: 1px solid #f4f4f4;
    text-align: right;
}

.order-bottom .total .t {
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f4f4f4;
}

.order-bottom .pay-fee {
    height: 81rpx;
    line-height: 81rpx;
}

.order-bottom .pay-fee .label {
    display: inline-block;
    width: 140rpx;
    color: #b4282d;
}

.order-bottom .pay-fee .txt {
    display: inline-block;
    width: 140rpx;
    color: #b4282d;
}

.order-express {
    margin-top: 20rpx;
    width: 100%;
    height: 100rpx;
    background: #fff;
}

.order-express .title {
    float: left;
    margin-bottom: 20rpx;
    padding: 10rpx;
}

.order-express .ti {
    float: right;
    width: 52rpx;
    height: 52rpx;
    margin-right: 16rpx;
    margin-top: 28rpx;
}

.order-express .t {
    font-size: 29rpx;
    margin-left: 10.25rpx;
    color: #a78845;
}

.order-express .b {
    font-size: 29rpx;
    margin-left: 10.25rpx;
    color: #a78845;
}

.order-express .traces {
    padding: 17.5rpx;
    background: #fff;
    border-bottom: 1rpx solid #f1e6cdcc;
}

.order-express .trace {
    padding-bottom: 17.5rpx;
    padding-top: 17.5rpx;
    background: #fff;
}

.order-express .acceptTime {
    margin-top: 20rpx;
    margin-right: 40rpx;
    text-align: right;
    font-size: 26rpx;
}

.order-express .acceptStation {
    font-size: 26rpx;
}
</style>
